<!--
 * @Description: 首页
 * @Author: zheng yiliang
 * @Date: 2021-05-09 10:39:14
 * @LastEditTime: 2021-06-13 19:59:46
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="home">
    <div
      id="menu"
      class="hover_animation"
      :class="[showMenu ? 'menu_close' : 'menu_open']"
      @click="showMenu = !showMenu"
    >
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div
      id="navgation"
      class="navgation"
      @click.self="showMenu = !showMenu"
      :class="[showMenu ? 'navgation_open' : 'navgation_close']"
    >
      <!-- 首页菜单 -->
      <div class="menu-navgation"></div>
      <ul class="point" @click="showMenu = !showMenu">
        <li>
          <router-link to="/" :class="{ isActive: showMenu }">首页</router-link>
        </li>
        <li><router-link to="/article">博客</router-link></li>
        <!-- <li><router-link to="/archives">归档</router-link></li> -->
        <!-- <li><router-link to="/links">友链</router-link></li> -->
        <li><router-link to="/message">留言</router-link></li>
        <!-- <li><router-link to="/about">关于</router-link></li> -->
      </ul>
      <div class="logo"><a>Mr.Zyl</a></div>
    </div>
    <div
      class="section"
      :style="bgFixed"
      id="section1"
      ref="section1"
      data-wow-delay=".2s"
    >
      <div class="fp-tablecell">
        <div class="page1">
          <div class="page1-nav wow zoomIn" data-wow-duration="2s">
            <p class="mgb10">
              <pan-thumb
                width="100px"
                height="100px"
                image="/images/avatar.gif"
              >
                <span style="font-family: BarbaraHand; font-size: 20px">
                  ZYL
                </span>
              </pan-thumb>
            </p>
            <h1>正好有时间</h1>
            <p>少年自有少年狂,心似骄阳万丈光</p>
            <!-- <router-link
              class="layui-btn layui-btn-normal"
              style="margin-top: 20px"
              to="/article"
              >Enter Blog</router-link
            > -->
          </div>
          <a
            class="next wow fadeInUp"
            @click="handleNext"
            data-wow-duration="2s"
            id="next"
          ></a>
        </div>
      </div>
    </div>
    <div class="section" id="section2" ref="section2">
      <div class="fp-tablecell">
        <div class="page2">
          <div class="warp-box">
            <div class="new-article">
              <div class="inner wow fadeInDown" data-wow-delay=".2s">
                <h1>最新文章</h1>
                <p>
                  很想给你写封信,告诉你这里的天气.
                  <br />昨夜的那场电影,还有我的心情.
                </p>
              </div>
            </div>
            <div class="layui-row">
              <template v-for="(item, index) in newArticles">
                <div
                  :key="item._id"
                  class="
                    layui-col-xs12 layui-col-sm4 layui-col-md4
                    wow
                    fadeInUp
                  "
                  style="padding: 0 10px"
                  :data-wow-delay="`${(index / 10) * 2}s`"
                >
                  <div class="single-news">
                    <div class="news-head">
                      <img v-lazy="item.img_url" />
                      <router-link :to="`/detail?id=${item._id}`" class="link"
                        ><i class="fa fa-link"></i
                      ></router-link>
                    </div>
                    <div class="news-content">
                      <h4>
                        <router-link :to="`/detail?id=${item._id}`"
                          >{{ item.title }}
                        </router-link>
                      </h4>
                      <div class="date">{{ item.create_time | dateChina }}</div>
                      <p>
                        {{ item.desc }}
                      </p>
                      <router-link :to="`/detail?id=${item._id}`" class="btn">
                        阅读更多
                      </router-link>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section" id="section3" :style="bgFixed">
      <div class="fp-tablecell">
        <div class="page3">
          <div class="warp-box">
            <div class="warp">
              <div class="inner">
                <div class="links">
                  <ul>
                    <li class="wow fadeInLeft">
                      <router-link to="/about">关于</router-link>
                    </li>
                    <li class="wow fadeInRight">
                      <router-link to="/links">+友情链接</router-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section" id="section4">
      <div class="fp-tablecell">
        <div class="page4">
          <div class="warp-box">
            <div class="about">
              <div class="inner">
                <h1 class="wow fadeInLeft">起风了</h1>
                <p class="wow fadeInRight">
                  我曾难自拔于世界之大，也沉溺于其中梦话，不得真假，不做挣扎，不惧笑话。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="section3 footer wow zoomIn" id="contact">
      <div class="footer-top">
        <div class="container">
          <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
              <div class="single-widget about">
                <div class="footer-logo">
                  <h2>正好有时间</h2>
                </div>
                <p>少年自有少年狂，心似骄阳万丈光。</p>
                <div class="button">
                  <router-link
                    to="/about"
                    class="btn layui-btn layui-btn-normal"
                    >关于我</router-link
                  >
                </div>
              </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
              <div class="single-widget">
                <h2>相关链接</h2>
                <ul class="social-icon">
                  <li class="active">
                    <router-link to="/article"
                      ><i class="fa fa-book"></i>博文</router-link
                    >
                  </li>
                  <li class="active">
                    <router-link to="/about"
                      ><i class="fa fa-comments"></i>留言</router-link
                    >
                  </li>
                  <li class="active">
                    <a><i class="fa fa-share"></i>资源</a>
                  </li>
                  <li class="active">
                    <a><i class="fa fa-snowflake-o"></i>日记</a>
                  </li>
                  <li class="active">
                    <router-link to="/archives"
                      ><i class="fa fa-files-o"></i>归档</router-link
                    >
                  </li>
                </ul>
              </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
              <div class="single-widget contact">
                <h2>联系我</h2>
                <ul class="list">
                  <li><i class="fa fa-map"></i>地址: 北京市海淀区</li>
                  <li><i class="fa fa-qq"></i>QQ: 1107361070</li>
                  <li><i class="fa fa-envelope"></i>邮箱: 1107361070@qq.com</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="container">
          <div class="layui-row">
            <div
              class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center"
            >
              <div>
                <!-- Copyright &copy; 2018-2018 燕十三 All Rights Reserved V.3.1.3 -->
                Copyright © 2021 zhengyiliang.cn All Rights Reserved. 备案号:
                <a
                  style="color: #fff"
                  href="http://beian.miit.gov.cn/"
                  target="_blank"
                >
                  京ICP备2021015150号-1</a
                >
                <div style="width: 300px; margin: 0 auto">
                  <a
                    target="_blank"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802035053"
                    style="
                      display: inline-block;
                      text-decoration: none;
                      height: 20px;
                      line-height: 20px;
                    "
                    ><img src="/images/beiang.png" style="float: left" />
                    <p
                      style="
                        float: left;
                        height: 20px;
                        line-height: 20px;
                        margin: 0px 0px 0px 5px;
                        color: #939393;
                      "
                    >
                      京公网安备 11010802035053号
                    </p></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src
import { newArticlesQry } from '@/api'
import PanThumb from '@/components/PanThumb'

export default {
  name: 'Home',
  components: { PanThumb },
  data() {
    return {
      bgFixed: '',
      showMenu: false,
      newArticles: []
    }
  },
  methods: {
    handleNext() {
      this.$refs.section2.scrollIntoView({ behavior: 'smooth' })
      // window.scrollTo({
      //   top: this.$refs.section2.offsetTop,
      //   behavior: 'smooth'
      // })
    },
    isIOS() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        this.bgFixed = ''
      } else {
        this.bgFixed = { backgroundAttachment: 'fixed' }
      } // ios终端
    }
  },
  mounted() {
    this.isIOS()
  },
  created() {
    newArticlesQry()
      .then((_) => {
        if (_._RejCode !== '00000000') return
        this.newArticles = _.data
      })
      .then((_) => {
        new this.$wow.WOW().init()
      })
  }
}
</script>
<style scoped>
@import '../styles/css/index_style.css';
@import '../styles/css/animate.min.css';
</style>
<style lang="scss" scoped>
.home {
  h4 {
    font-weight: 400;
    font-size: 16px;
    a {
      color: #333;
    }
  }
  .isActive {
    color: #6bc30d;
    &:before {
      animation: line 1s linear;
      content: '';
      height: 1px;
      position: absolute;
      top: 50%;
      left: 15px;
      background-color: #6bc30d;
      right: 15px;
    }
  }
  @keyframes line {
    0% {
      right: 105px;
      background-color: #6bc30d;
    }
    50% {
      background-color: #6bc30d;
      right: 15px;
    }
  }
}
</style>
